<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="shop.avatar">
        <div class="back" @click="backToHome">
          <i class="fa fa-fw fa-chevron-left icon"></i>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{shop.name}}</span>
        </div>
        <div class="description">
          {{shop.description}}/{{shop.deliveryTime}}分钟送达
        </div>
        <div v-if="shop.supports" class="support">
          <v-icon :iconType="classMap[shop.supports[0].type]"></v-icon>
          <span class="text">{{shop.supports[0].description}}</span>
        </div>
      </div>
      <div class="support-count" v-if="shop.supports" @click="showDetail">
        <span class="count">{{shop.supports.length}}个</span>
        <i class="fa fa-fw fa-chevron-right icon"></i>
      </div>
    </div>
    <div class="bulletin-wrapper" @click="showDetail">
      <span class="bulletin-title"></span><span class="bulletin-text">{{shop.bulletin}}</span>
      <i class="fa fa-chevron-right icon"></i>
    </div>
    <div class="backgroud">
      <img :src="shop.avatar" width="100%" height="100%">
    </div>
    <v-shopDetail ref="shopDetail">
    </v-shopDetail>
  </div>

</template>

<script type="text/ecmascript-6">
  import shopDetail from './shopDetail/shopDetail.vue';
  import icon from '@/components/customIcon/customIcon.vue';
  import {mapGetters} from 'vuex';
  import router from '@/router';
  export default {
    components: {'v-shopDetail': shopDetail, 'v-icon': icon},
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    },
    name: 'header',
    computed: {
      ...mapGetters({
        shop: 'selectedShop'
      })
    },
    methods: {
      showDetail() {
        this.$refs.shopDetail.toggle();
      },
      backToHome() {
        router.push({path: '/home'});
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">

  @import '../../../common/stylus/mixin.styl'
  .header
    position relative
    overflow hidden
    width 100%
    background-color rgba(7, 17, 27, 0.5)
    color: #ffffff
    .content-wrapper
      position: relative
      font-size: 0
      padding 24px 12px 18px 24px
      .avatar
        display: inline-block
        vertical-align: top
        .back
          position absolute
          top 5px
          left -5px
          .icon
            display block
            padding 10px
            color white
            font-size 10px
        img
          border-radius: 2px
      .content
        margin-left: 16px
        display: inline-block
        font-size: 14px
        vertical-align: top
        .title
          margin 2px 0 8px 0
          .brand
            vertical-align: middle
            width: 30px
            height: 18px
            display: inline-block
            bg-image('brand')
            background-size: 30px 18px
          .name
            vertical-align: middle
            margin-left: 6px
            font-size: 16px
            font-weight: bolder

        .description
          margin-bottom: 10px
          font-weight: 200;
          font-size: 12px
        .support
          .text
            line-height 12px
            font-size 12px
      .support-count
        position absolute
        right 12px
        bottom 14px
        padding 0 8px
        height 24px
        line-height 24px
        border-radius 12px
        background rgba(0, 0, 0, 0.2)
        text-align content
        .count
          vertical-align top
          font-size: 10px
        .icon
          margin-left 2px
          line-height 24px
          font-size: 10px

    .bulletin-wrapper
      position relative
      height: 28px
      padding: 0 22px 0 12px
      line-height: 28px
      white-space nowrap
      background-color rgba(7, 17, 27, 0.2)
      overflow: hidden
      text-overflow ellipsis
      .bulletin-title
        vertical-align: middle
        width: 22px
        height: 12px
        display: inline-block
        background-size: 22px 12px
        margin-right 4px
        bg-image('bulletin')
      .bulletin-text
        margin-right 10px
        vertical-align: middle
        font-size 10px
      .icon
        position: absolute
        right 8px
        top: 4px
        line-height 28px
    .backgroud
      position absolute
      top 0px
      z-index -1
      left 0px
      width 100%
      height 100%
      filter: blur(10px)
</style>
